﻿<div style="height:800px;" v-show="!item.length"></div>
<div id="TplRank">
    <!-- Girl Boy Publish  -->
    <div class="box" v-bind:class="{'Girl' : el.categoryId==1,'Boy' : el.categoryId==0,'Publish' : el.categoryId==2 }" v-for="el in item">
        <h4><span v-text="el.rankName"></span></h4>

        <dl v-on:click="location(el.categoryId,el.bestSellRank.rankType)">
            <dt v-text="el.bestSellRank.rankName"></dt>
            <dd v-html="el.bestSellRank.totalRankBooks.join('<i></i>')"></dd>
            <dd class="svg">
                <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                <svg class="active" stroke="none" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
                    <title>icon01</title>
                    <desc>Created with Sketch.</desc>
                    <defs></defs>
                    <g id="icon" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="icon01" class="fill">
                            <g id="Page-1">
                                <path d="M37.3593,0.0055 L8.6143,0.0055 C7.8243,0.0055 6.8743,0.5765 6.5023,1.2735 L0.2373,13.0445 C-0.1347,13.7415 -0.0607,14.8365 0.4003,15.4785 L21.9593,45.5095 C22.1913,45.8315 22.4983,45.9945 22.8063,45.9945 C23.1103,45.9945 23.4153,45.8355 23.6483,45.5195 L45.5613,15.7085 C46.0293,15.0715 46.1123,13.9795 45.7453,13.2795 L39.4633,1.2775 C39.0973,0.5775 38.1493,0.0055 37.3593,0.0055 M37.0573,2.8775 L43.0333,14.2965 L22.8243,41.7875 L2.9373,14.0865 L8.9043,2.8775 L37.0573,2.8775" id="Fill-1"></path>
                                <polygon id="Fill-4" points="1.984 15.9863 43.973 15.9863 43.973 12.9893 1.984 12.9893"></polygon>
                                <polygon id="Fill-6" points="21.4265 42.8207 7.9435 2.2507 10.6735 1.3447 24.1565 41.9147"></polygon>
                                <polygon id="Fill-7" points="24.2594 42.5164 21.5434 41.5684 35.9954 0.2464 38.7114 1.1944"></polygon>
                                <path d="M15.0431,15.1842 L12.6831,13.5432 L21.6961,0.6162 C21.9571,0.2412 22.3811,0.0122 22.8381,0.0002 C23.2781,0.0072 23.7311,0.1952 24.0121,0.5552 L33.6961,13.0052 L31.4241,14.7662 L22.9391,3.8582 L15.0431,15.1842 Z" id="Fill-8"></path>
                            </g>
                        </g>
                    </g>
                </svg>
            </dd>
        </dl>

        <dl v-on:click="location(el.categoryId,el.hotRank.rankType)">
            <dt v-text="el.hotRank.rankName"></dt>
            <dd v-html="el.hotRank.totalRankBooks.join('<i></i>')"></dd>
            <dd class="svg">
                <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                <svg class="active" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
                    <title>icon03</title>
                    <desc>Created with Sketch.</desc>
                    <defs></defs>
                    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="icon03" fill="#FF87BA">
                            <g id="Page-1">
                                <path d="M4.9482,39.8432 C10.0922,40.2692 12.8422,40.8472 14.2932,41.9412 C15.4162,42.7882 15.2432,43.1242 27.3282,43.1242 C31.0152,43.1242 38.2242,42.9692 38.7762,40.4342 C38.9962,39.4202 37.9302,38.4232 37.9252,38.4162 C37.6342,37.6952 37.9592,36.8502 38.6702,36.5382 C38.6812,36.5322 41.5462,35.5032 41.6122,33.8992 C41.6542,32.8732 40.9522,32.2562 40.9352,32.2302 C40.5172,31.5802 40.6702,30.6882 41.3032,30.2462 C41.3112,30.2402 43.1682,29.1122 43.1232,27.5752 C43.0882,26.3542 41.4822,25.4952 41.4322,25.4662 C41.0742,25.2602 40.8132,24.9052 40.7322,24.4972 C40.6502,24.0912 40.7412,23.6642 40.9942,23.3352 C40.9942,23.3352 41.7232,22.1722 41.6982,21.0832 C41.6442,18.7492 39.1392,18.6762 38.6022,18.6762 C34.9822,18.6762 25.6822,18.7132 25.6822,18.7132 C25.1812,18.7142 24.7472,18.4782 24.4782,18.0762 C24.2082,17.6742 24.1882,17.1752 24.3462,16.7182 C25.7482,12.6712 26.5322,6.3232 25.2312,4.1552 C24.8482,3.5152 24.7602,2.8762 23.3252,2.8762 C23.1262,2.8762 22.6522,3.0332 22.1592,4.2132 C17.3602,15.7122 10.1962,22.3622 4.3282,22.9622 C3.8222,24.1192 2.8712,26.5142 2.8712,30.8632 C2.8712,35.2992 4.2742,38.7322 4.9482,39.8432 M27.3282,46.0002 C14.2832,46.0002 14.1822,45.4582 12.5662,44.2392 C11.7092,43.5932 10.0922,43.1462 4.1862,42.7602 C3.7582,42.7322 3.3502,42.5682 3.0772,42.2352 C2.9512,42.0822 0.0002,37.7702 0.0002,30.8632 C0.0002,24.0562 2.1122,20.9532 2.2032,20.8092 C2.4652,20.3892 2.9252,20.1332 3.4192,20.1332 C8.2692,20.1332 14.9912,13.9312 19.5112,3.1042 C20.2932,1.2312 20.4542,0.0002 23.3252,0.0002 C24.9582,0.0002 26.7882,1.1712 27.6932,2.6742 C29.5462,5.7442 28.6052,12.3392 27.7332,15.8642 C30.6942,15.8402 36.0532,15.7992 38.6022,15.7992 C42.1502,15.7992 44.4972,17.9192 44.5682,21.0172 C44.5922,22.0392 44.4582,23.3462 44.1622,24.0212 C44.9432,24.8012 45.9502,25.9782 45.9942,27.4932 C46.0492,29.4482 44.7702,30.9382 43.9542,31.7922 C44.1412,32.3612 44.5162,33.1152 44.4802,34.0172 C44.3902,36.2352 42.6822,37.6652 41.6162,38.4102 C41.7052,39.0172 41.7732,40.1622 41.5802,41.0472 C40.8122,44.5802 35.6412,46.0002 27.3282,46.0002" id="Fill-1"></path>
                            </g>
                        </g>
                    </g>
                </svg>
            </dd>
        </dl>

        <dl v-on:click="location(el.categoryId,el.collectionRank.rankType)">
            <dt v-text="el.collectionRank.rankName"></dt>
            <dd v-html="el.collectionRank.totalRankBooks.join('<i></i>')"></dd>
            <dd class="svg">
                <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                <svg class="active" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
                    <title>icon02</title>
                    <desc>Created with Sketch.</desc>
                    <defs></defs>
                    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="icon02" fill="#FF87BA">
                            <g id="Page-1">
                                <path d="M2.8722,2.9933 L2.8722,37.4603 C2.8722,37.6053 3.0662,37.8593 3.2042,37.8973 L21.7462,43.0233 C22.2302,43.1593 23.2752,43.1603 23.7562,43.0303 L42.7422,37.8873 C42.8792,37.8493 43.1122,37.6023 43.1122,37.4603 L43.1122,2.9763 L24.5092,8.0083 C23.8902,8.1773 23.2212,8.2113 22.7682,8.2113 C22.1092,8.2113 21.4742,8.1363 20.9792,7.9983 L2.8722,2.9933 L2.8722,2.9933 Z M22.7712,46.0043 C22.1112,46.0043 21.4742,45.9293 20.9792,45.7913 L2.4822,40.6653 C1.0922,40.2783 0.0002,38.9013 0.0002,37.4603 L0.0002,2.5403 C0.0002,0.8403 1.5982,-0.3497 3.2492,0.1043 L21.7462,5.2303 C22.2272,5.3653 23.2752,5.3663 23.7572,5.2373 L42.7422,0.0943 C44.3862,-0.3527 45.9842,0.8423 45.9842,2.5403 L45.9842,37.4603 C45.9842,38.9073 44.8882,40.2813 43.4942,40.6583 L24.5092,45.8013 C23.8932,45.9693 23.2242,46.0043 22.7712,46.0043 L22.7712,46.0043 Z" id="Fill-1"></path>
                                <path d="M28.8264,16.4635 C28.1994,16.4635 27.6234,16.0495 27.4454,15.4155 C27.2304,14.6535 27.6754,13.8605 28.4394,13.6445 L38.4894,10.8155 C39.2474,10.6045 40.0454,11.0475 40.2604,11.8105 C40.4754,12.5735 40.0304,13.3655 39.2664,13.5815 L29.2164,16.4105 C29.0874,16.4465 28.9554,16.4635 28.8264,16.4635" id="Fill-3"></path>
                                <path d="M28.8264,25.0803 C28.1994,25.0803 27.6234,24.6663 27.4454,24.0323 C27.2304,23.2693 27.6754,22.4773 28.4394,22.2613 L38.4894,19.4323 C39.2474,19.2203 40.0454,19.6643 40.2604,20.4263 C40.4754,21.1903 40.0304,21.9823 39.2664,22.1983 L29.2164,25.0273 C29.0874,25.0633 28.9554,25.0803 28.8264,25.0803" id="Fill-5"></path>
                                <path d="M28.8264,33.6968 C28.1994,33.6968 27.6234,33.2828 27.4454,32.6488 C27.2304,31.8858 27.6754,31.0938 28.4394,30.8778 L38.4894,28.0488 C39.2474,27.8378 40.0454,28.2808 40.2604,29.0438 C40.4754,29.8068 40.0304,30.5988 39.2664,30.8148 L29.2164,33.6438 C29.0874,33.6798 28.9554,33.6968 28.8264,33.6968" id="Fill-7"></path>
                                <path d="M17.3377,16.4635 C17.9647,16.4635 18.5407,16.0495 18.7187,15.4155 C18.9337,14.6535 18.4887,13.8605 17.7247,13.6445 L7.6747,10.8155 C6.9157,10.6045 6.1177,11.0475 5.9037,11.8105 C5.6887,12.5735 6.1337,13.3655 6.8977,13.5815 L16.9477,16.4105 C17.0767,16.4465 17.2087,16.4635 17.3377,16.4635" id="Fill-9"></path>
                                <path d="M17.3377,25.0803 C17.9647,25.0803 18.5407,24.6663 18.7187,24.0323 C18.9337,23.2693 18.4887,22.4773 17.7247,22.2613 L7.6747,19.4323 C6.9157,19.2203 6.1177,19.6643 5.9037,20.4263 C5.6887,21.1903 6.1337,21.9823 6.8977,22.1983 L16.9477,25.0273 C17.0767,25.0633 17.2087,25.0803 17.3377,25.0803" id="Fill-11"></path>
                                <path d="M17.3377,33.6968 C17.9647,33.6968 18.5407,33.2828 18.7187,32.6488 C18.9337,31.8858 18.4887,31.0938 17.7247,30.8778 L7.6747,28.0488 C6.9157,27.8378 6.1177,28.2808 5.9037,29.0438 C5.6887,29.8068 6.1337,30.5988 6.8977,30.8148 L16.9477,33.6438 C17.0767,33.6798 17.2087,33.6968 17.3377,33.6968" id="Fill-13"></path>
                                <polygon id="Fill-15" points="20.994 45.0095 23.991 45.0095 23.991 6.0055 20.994 6.0055"></polygon>
                            </g>
                        </g>
                    </g>
                </svg>
            </dd>
        </dl>
    </div>

</div>